import type {BadgeProps, CalendarProps} from 'antd';
import {Badge, Calendar, FloatButton, List} from "antd";
import type {Dayjs} from 'dayjs';
import './index.css';

import {Lunar, Solar} from 'lunar-typescript';
import {Feature, keywordConvert, loadTodoList} from "./core.ts";
import {useLayoutEffect, useState} from "react";
import dayjs from 'dayjs'


function CalendarCard() {

    // 日历时间
    const [calendarValue, setCalendarValue] = useState<Dayjs>(dayjs());


    const onSelect = (newValue: Dayjs) => {
        setCalendarValue(newValue);
    };

    // 待办项类别
    const todoCellRender = (day: Dayjs) => {
        const listData = loadTodoList(day);
        return (
            <List
                className="todo-list"
                itemLayout="horizontal"
                locale={{emptyText:"暂无待办事项"}}
                dataSource={listData}
                renderItem={(item, index) => (
                    <List.Item className="todo-item">
                        <List.Item.Meta
                            title={<a>{item.title}</a>}
                        />
                    </List.Item>
                )}
            />
        );
    };

    const cellRender: CalendarProps<Dayjs>['cellRender'] = (date, info) => {
        if (info.type !== 'date') return info.originNode;

        // 普通鲶鱼儿
        const year = date.year();
        const month = date.month() + 1;
        const day = date.date();

        // 阳历
        const s = Solar.fromDate(date.toDate());

        // 阴历
        const l = Lunar.fromDate(date.toDate());

        // 日期节日列表
        const dayFlag = [...s.getFestivals(), ...l.getFestivals(), ...l.getOtherFestivals(), ...s.getOtherFestivals()].join(","); // 阴历节日标记


        const titleRemark = [`${year}/${month}/${day}`, dayFlag].filter(i => i).join("\n");
        return (<div
            className="ant-picker-cell-inner ant-picker-calendar-date"
            title={titleRemark}
        >
            <div className="ant-picker-calendar-date-value cale-head">
                <span className="cale-head-item month">{day === 1 && month}</span>
                <span className={["cale-head-item", l.getDay() == 1 ? "lmonth" : ""].join(" ")}>{l.getDay() == 1 && l.getMonthInChinese() + "月"}{l.getDayInChinese()}</span>
                <span className="cale-head-item">{day}</span>
            </div>
            <div>
                {/*{ dayFlag.length > 0 && <div className="festivals">{dayFlag}</div> }*/}
                <div className="ant-picker-calendar-date-content">
                    {todoCellRender(date)}
                </div>
            </div>
        </div>);
    };


    // 按键点击
    function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
        event.preventDefault();
        event.stopPropagation();

        const feature = keywordConvert(event.keyCode, event);
        if (!feature) return;
        switch (feature) {
            case Feature.ToNextMonth:
                setCalendarValue(calendarValue.add(1, 'month'));
                break;
            case Feature.ToPrevMonth:
                setCalendarValue(calendarValue.subtract(1, 'month'));
                break;
            case Feature.ToNextWeek:
                setCalendarValue(calendarValue.add(1, 'week'));
                break;
            case Feature.ToPrevWeek:
                setCalendarValue(calendarValue.subtract(1, 'week'));
                break;
            case Feature.ToPrevDay:
                setCalendarValue(calendarValue.subtract(1, 'day'));
                break;
            case Feature.ToNextDay:
                setCalendarValue(calendarValue.add(1, 'day'));
                break;
            default:
                break;
        }
    }

    return (
        <div
            onKeyDown={onKeyDown}
        >
            <Calendar
                value={calendarValue}
                fullscreen={true}
                headerRender={
                    ({ value, type, onChange, onTypeChange }) => {
                        return <div></div>;
                    }
                }
                fullCellRender={cellRender} /* 项渲染 */
                onSelect={onSelect} /* 选择日期 */
            />
        </div>

    );
}

export default CalendarCard;